<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx-yui3 - Group Usage</title>

    <!--[if IE 6]>
    <link type='text/css' rel='stylesheet' href='../css/inputEx-IE6.css' />
    <![endif]-->

    <!-- Demo CSS -->
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

    <script type="text/javascript" src="../js/inputex-loader.js"></script>
</head>

<body>

<p class='demoTitle'>inputEx - Group Usage</p>


<!-- Example 1 -->
<div class='exampleDiv'>

    <p class="title">Basic Group creation</p>

    <p>Use the following code to create a basic inputEx group.</p>

    <div class='demoContainer' id='container1'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var contactFormFields = [
            {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
            {inputParams: {label: 'Firstname', name: 'firstname', required: true } },
            {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } },
            {type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}},
            {type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}},
            {type:'url', inputParams: {label: 'Website', name:'website'}}
            ];
            new YAHOO.inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about
            yourself...'});
        </textarea>
    </div>

</div>


<!-- Example 2 -->
<div class='exampleDiv'>

    <p class="title">Composition</p>

    <p>The YAHOO.inputEx.Group class inherits from inputEx.Field</p>

    <div class='demoContainer' id='container2'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            new YAHOO.inputEx.ListField({
            elementType: {
            type: 'group',
            inputParams: {
            fields: contactFormFields
            }
            } ,
            parentEl: 'container2'
            });
        </textarea>
    </div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

    <p class="title">Updated event</p>

    <p>How to listen to the updated event :</p>

    <div class='demoContainer' id='container3'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript" cols="60" rows="1">
            var el = YAHOO.util.Dom.get('container3');
            var group = new YAHOO.inputEx.Group({parentEl: el, fields: contactFormFields });
            var logDiv = inputEx.cn('div', null, null, "Log :<br/>");
            el.appendChild(logDiv);
            group.updatedEvt.subscribe(function() {
            logDiv.innerHTML += "Updated at "+(new Date())+"<br/>";
            });
        </textarea>
    </div>

</div>


<!-- Example 4 -->
<div class='exampleDiv'>

    <p class="title">Collapsible</p>

    <p>Collapsible</p>

    <div class='demoContainer' id='container4'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript" cols="60" rows="1">
            new YAHOO.inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations',
            collapsible: true});
        </textarea>
    </div>

</div>


<!-- Example 5 -->
<div class='exampleDiv'>

    <p class="title">Composition</p>

    <p>Composition</p>

    <div class='demoContainer' id='container5'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript" cols="60" rows="1">
            contactFormFields.push({
            type: 'group',
            inputParams: {
            name: 'phone',
            collapsible: true,
            legend: 'Phone number',
            fields: [
            {label: 'Home', inputParams: {name: 'home' } },
            {label: 'Business', inputParams: {name: 'business' } },
            {label: 'Mobile', inputParams: {name: 'mobile' } },
            {label: 'Fax', inputParams: {name: 'fax' } }
            ]
            }
            })
            var field5 = new YAHOO.inputEx.Group({parentEl: 'container5', fields: contactFormFields});
            var button5 = YAHOO.inputEx.cn('button', null, null, 'Get value');
            YAHOO.util.Dom.get('container5').appendChild(button5);
            YAHOO.util.Event.addListener(button5, "click", function() {
            alert( YAHOO.lang.JSON.stringify(field5.getValue()) );
            });
        </textarea>
    </div>

</div>


<!-- Example 6 -->
<div class='exampleDiv'>

    <p class="title">Field descriptions</p>

    <p>Specify field descriptions</p>

    <div class='demoContainer' id='container6'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var descriptedFields = [
            {type: 'select', inputParams: {label: 'Title', name: 'title', description: 'Select your gender',
            selectValues: ['Mr','Mrs','Mme'] } },
            { inputParams: {label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true,
            value:'Jacques' } },
            { inputParams: {label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' } },
            { type:'email', inputParams: {description: 'Your email. We wont send you any commercial information', label:
            'Email', name: 'email'}},
            {type:'boolean', inputParams: {description: 'Check this box if you are happy to be there', label: 'Happy to
            be there ?', name: 'email'}},
            { type:'url', inputParams: {description: 'Your blog url', label: 'Website', name:'website'}}
            ];
            new YAHOO.inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});
        </textarea>
    </div>

</div>


<!-- Example 7 -->
<div class='exampleDiv'>

    <p class="title">Flatten output value for a sub-group</p>

    <p>The parent group will then flatten the sub-group value within its value.</p>

    <p>In this example, we return <i>{firstname: ..., lastname: ..., title:... }</i> instead of <i>{ MySubForm:
        {firstname: ..., lastname: ...}, title:... }</i>.</p>

    <div class='demoContainer' id='container7'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var flattenGroup = new YAHOO.inputEx.Group({
            parentEl: 'container7',
            legend: 'Flatten demo',
            inputParams: {name: "MyForm"},
            fields: [
            {
            type: 'group',
            flatten: true,
            inputParams: {
            name: "MySubForm",
            fields: [
            {inputParams: {label: 'Firstname', name: 'firstname' }},
            {inputParams: {label: 'Lastname', name: 'lastname',description: "Firstname and Lastname are within the same
            sub-group" }}
            ]
            },
            },
            { inputParams: {label: 'Title', name: 'title' } }
            ]
            });
            flattenGroup.updatedEvt.subscribe(function(e,params) {
            var value = params[0];
            YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value))
            );
            });
        </textarea>
    </div>

</div>

<script>
    inputEx.YUI({base:'../lib/yui3/',inputExBase:'../'}).use('group','stringfield','emailfield','urlfield','checkbox','selectfield', function(Y) {
        //Y.on('event:ready', function() {
        // Required for the UrlField and listfield
        Y.inputEx.spacerUrl = "../images/space.gif";

        var contactFormFields = [
            {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
            {inputParams: {label: 'Firstname', name: 'firstname', required: true } },
            {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont'} },
            {type:'email', inputParams: {label: 'Email', name: 'email', validator:[{required: true}], showMsg: true}},
            {type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}},
            {type:'url', inputParams: {label: 'Website', name:'website'}}
        ];
        new Y.inputEx.Group({fields: contactFormFields, legend: 'Tell us about yourself...'}).render('#container1');

        //});
    })


        /*
         YAHOO.util.Event.addListener(window, 'load', function() {

         // Example 1
         var contactFormFields = [
         {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
         {inputParams: {label: 'Firstname', name: 'firstname', required: true } },
         {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont'} },
         {type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}},
         {type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}},
         {type:'url', inputParams: {label: 'Website', name:'website'}}
         ];
         new YAHOO.inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'});


         // Example 2
         new YAHOO.inputEx.ListField({
         elementType: {
         type: 'group',
         inputParams: {
         fields: contactFormFields
         }
         } ,
         parentEl: 'container2'
         });


         // Example 3
         var el = YAHOO.util.Dom.get('container3');
         var group3 = new YAHOO.inputEx.Group({parentEl: el, fields: contactFormFields });
         var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
         el.appendChild(logDiv);
         group3.updatedEvt.subscribe(function() {
         logDiv.innerHTML += "Updated at " + (new Date()) + "<br />";
         });

         var setValueButton = inputEx.cn('button', null, null, "SetValue");
         YAHOO.util.Event.addListener(setValueButton, 'click', function() {
         group3.setValue({
         title: 'Mme',
         firstname: 'Eric',
         lastname: 'Abouaf',
         happy: false,
         email: 'something@email.com',
         website: 'http://javascript.neyric.com/inputex'
         });
         });
         el.appendChild(setValueButton);


         // Example 4
         new YAHOO.inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true});

         // Example 5
         var contactFormFields2 = [
         {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
         {inputParams: {label: 'Firstname', name: 'firstname', required: true } },
         {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont', required:false } },
         {type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}},
         {type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}},
         {type:'url', inputParams: {label: 'Website', name:'website'}}
         ];
         contactFormFields2.push({
         type: 'group',
         inputParams: {
         name: 'phone',
         collapsible: true,
         legend: 'Phone number',
         fields: [
         { inputParams: {label: 'Home', name: 'home' } },
         { inputParams: {label: 'Business', name: 'business' } },
         { inputParams: {label: 'Mobile',name: 'mobile' } },
         { inputParams: {label: 'Fax', name: 'fax' } }
         ]
         }
         });
         var field5 = new YAHOO.inputEx.Group({parentEl: 'container5', fields: contactFormFields2});
         var button5 = YAHOO.inputEx.cn('button', null, null, 'Get value');
         YAHOO.util.Dom.get('container5').appendChild(button5);
         YAHOO.util.Event.addListener(button5, "click", function() {
         alert(YAHOO.lang.JSON.stringify(field5.getValue()));
         });
         var setValueButton = inputEx.cn('button', null, null, "SetValue");
         YAHOO.util.Event.addListener(setValueButton, 'click', function() {
         field5.setValue({
         title: 'Mme',
         firstname: 'Eric',
         lastname: 'Abouaf',
         happy: false,
         email: 'something@email.com',
         website: 'http://javascript.neyric.com/inputex',
         phone:{
         home:"911",
         fax:"911"
         }
         });
         });
         var el = YAHOO.util.Dom.get('container5');
         el.appendChild(setValueButton);
         var validButton = YAHOO.inputEx.cn('button', null, null, 'Validate');
         YAHOO.util.Dom.get('container5').appendChild(validButton);
         YAHOO.util.Event.addListener(validButton, "click", function() {
         alert(field5.validate());
         });


         // Example 6
         var descriptedFields = [
         {type: 'select', inputParams: {label: 'Title', name: 'title', description: 'Select your gender',  selectValues: ['Mr','Mrs','Mme'] } },
         { inputParams: {label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' } },
         { inputParams: {label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' } },
         { type:'email', inputParams: {description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'}},
         {type:'boolean', inputParams: {description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'}},
         { type:'url', inputParams: {description: 'Your blog url', label: 'Website', name:'website'}}
         ];
         new YAHOO.inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});


         // Example 7
         var flattenGroup = new YAHOO.inputEx.Group({
         parentEl: 'container7',
         legend: 'Flatten demo',
         inputParams: {name: "MyForm"},
         fields: [
         {
         type: 'group',
         inputParams: {
         name: "MySubForm",
         flatten: true,
         fields: [
         {inputParams: {label: 'Firstname', name: 'firstname' }},
         {inputParams: {label: 'Lastname', name: 'lastname',description: "Firstname and Lastname are within the same sub-group" }}
         ]
         }
         },
         { inputParams: {label: 'Title', name: 'title' } }
         ]
         });
         flattenGroup.updatedEvt.subscribe(function(e, params) {
         var value = params[0];
         YAHOO.util.Dom.get('container7').appendChild(inputEx.cn('div', null, null, YAHOO.lang.JSON.stringify(value)));
         });

         });
         */

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>